import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:my_meeting/extension/widget_ext.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

class RangeSliderPopup extends StatefulWidget {
  @override
  _RangeSliderPopupState createState() => _RangeSliderPopupState();
}

class _RangeSliderPopupState extends State<RangeSliderPopup> {
  double _startValue = 9;
  double _endValue = 18;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Range Slider with Popup'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              children: [
                SfRangeSlider(
                  min: 9.0,
                  max: 18.0,
                  interval: 1,
                  showTicks: true,
                  showLabels: true,
                  enableTooltip: true,
                  minorTicksPerInterval: 1,
                  values: SfRangeValues(_startValue, _endValue),

                  activeColor: Colors.blue,
                  // 选中部分颜色
                  inactiveColor: Colors.grey[300],
                  // 未选中部分颜色

                  onChanged: (SfRangeValues newValues) {
                    setState(() {
                      _startValue = newValues.start;
                      _endValue = newValues.end;
                    });
                  },
                  onChangeEnd: (SfRangeValues newValues) {},
                ).expanded(),
                Container(
                  width: 20,
                  height: 20,
                  color: Colors.red,
                ),
              ],
            ),
            SizedBox(height: 20),
            Text(
                'Selected Range: ${_startValue.toStringAsFixed(1)} - ${_endValue.toStringAsFixed(1)}'),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: RangeSliderPopup(),
  ));
}
